<!DOCTYPE html>
<html>

<head>
  <title>Center Position Control - ETRS89_UTM31N</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
  <link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
  <script src="./lib/proj4leaflet.min.js"></script>
  <script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }
    .leaflet-control-mapcentercoord-icon {
      background: url(http://xguaita.github.io/Leaflet.MapCenterCoord/dist/icons/MapCenterCoordIcon2.svg) 50% 50% no-repeat;
    }
  </style>
</head>

<body>

  <div id="map" class="map"></div>

  <script>
    var etrs89N31 = new L.Proj.CRS("EPSG:25831", "+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs", {
      origin: [238379.2278, 4265559.3497],
      resolutions: [305.75, 152.87, 76.437, 38.219, 19.109, 9.5546, 4.7773, 2.3887, 1.1943, 0.5972]
    });

    //Ortofoto ideib
    var orto = new L.TileLayer.WMS("http://ideib.caib.es/pub_ideib/public/Ortofoto/MapServer/WMSServer", {
      layers: '0,1,2',
      format: 'image/jpeg',
      attribution: "© IDEIB",
      maxZoom: 9,
      minZoom: 0,
      continuousWorld: true
    });

    var map = L.map('map', {
      crs: etrs89N31,
      center: [39.588, 2.935],
      zoom: 0,
      layers: [orto],
      continuousWorld: true
    });

    L.control.mapCenterCoord({
      iconFile: 'MapCenterCoordIcon2.png',
      template: '<b>ETRS89 UTM31N</b><br>x:{x} y:{y}',
      projected: true,
      onMove: true,
      formatProjected: '#.##0,'
    }).addTo(map);
  </script>
</body>

</html>
